<template>
	<view>
		<view class="search">
			<view class="cu-bar bg-white search">
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<input type="text" placeholder="输入客户名称/布种名称" v-model="listQuery.title" confirm-type="search"></input>
				</view>
				<view class="action">
					<button class="cu-btn bg-mauve shadow-blur round" @click="getSearch">搜索</button>
				</view>
			</view>
		</view>

		<view v-if="total > 0">
			<!-- 上层信息框 -->
			<view v-for="(item, index) in dataList" @click="goInfo(item)">
				<view class="topInfo baseBack">
					<view class="cardNumber"></view>
					<view style="color:#AC58FA;margin-top: 20rpx;margin-left: 10rpx;margin-right: auto;">{{item.comName}}
					</view>
					<view style="margin-right: 50rpx;margin-top: 50rpx;color:grey;">{{item.clName}}</view>
				</view>

				<!-- 中层信息框 -->
				<view class="middleInfo baseBack">
					<view style="margin-left: 5%;margin-right: 5%;">
						<u-line-progress :percentage="getFinish(item.num,item.finish)" inactiveColor="#AC58FA"
							height="8" activeColor="#19be6b"></u-line-progress>
					</view>
				</view>

				<!-- 虚线勿动 -->
				<!-- <view class="conUp">
			<view class="splitArea"></view>
		</view> -->
			</view>
			<uni-load-more :status="status" :content-text="contentText"></uni-load-more>
		</view>
		<view v-else>
			<u-empty icon="https://fziot.zheyun.top:9021/static/image/empty/data.png"></u-empty>
		</view>
		<!-- 下层信息框 -->
		<!-- <view class="downInfo baseBack">
			<view class="flex">
				<view style="margin-left: auto;margin-right: 40rpx;">
					小计：
					<text class="price">300.00</text>
					<text style="color: #AC58FA;">元</text>
				</view>
			</view>
			<view style="padding-bottom: 15rpx; color: grey;">
				<view class="pp"></view>
				备注：
				<text class="pv">— —</text>
			</view>
		</view> -->
		<watermark :text="companyName"></watermark>
	</view>
</template>

<script>
	import {
		comList
	} from '@/api/company/task.js';
	import watermark from 'components/warter/watermark.vue'
	export default {
		components: {
			watermark
		},
		data() {
			return {
				dataList: [],
				companyName: this.$store.getters.name,
				status: 'more',
				total: 0,
				contentText: {
					contentdown: '查看更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				},
				listQuery: {
					pageNum: 0,
					pageSize: 10,
					orderByColumn: 'createTime',
					isAsc: 'desc',
					companyId: this.$store.getters.companyId
				},
			}
		},
		onShow() {
			this.listQuery.pageNum = 0
			this.status = 'more'
			this.dataList = []
			this.getList()
		},
		onReachBottom() {
			let limit = this.listQuery.pageNum * this.listQuery.pageSize
			if (this.total > limit) {
				this.getList()
			}
		},
		async onPullDownRefresh() {
			this.listQuery.pageNum = 0
			this.status = 'more'
			this.dataList = []
			this.getList()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1000)

		},
		mounted() {
			let userType = this.$store.getters.userType
			if (userType && userType === '3') {
				this.listQuery.userType = userType
			}
		},
		methods: {
			getList() {
				this.listQuery.pageNum = this.listQuery.pageNum + 1;
				this.status = 'loading'
				uni.showLoading()
				comList(this.listQuery).then(response => {
					uni.hideLoading()
					this.total = response.total
					let resultData = response.rows
					for (let i = 0; i < resultData.length; i++) {
						this.dataList.push(resultData[i]);
					}
					// 判断总条数如果是最大则改为没有更多
					if (this.dataList.length >= response.total) {
						this.status = 'no-more';
					} else {
						this.status = 'more';
					}
				})
			},
			getSearch() {
				this.listQuery.pageNum = 0
				this.status = 'more'
				this.dataList = []
				this.getList()
			},
			getFinish(num, finish) {
				let a = Big(num);
				let b = Big(finish);
				Big.DP = 2;
				let c = b.div(a).times(100);
				return c + '';
			},
			goInfo(item) {
				item.clType = item.clType.replace(/%/g, '%25');
				this.$tab.navigateTo("/pagesA/task/tempInfo?info=" + decodeURIComponent(JSON.stringify(item)))
			},
		}
	}
</script>

<style>
	page {
		height: 101%;
	}

	.cardNumber {
		margin-right: auto;
		color: #AC58FA;
		font-size: 45rpx;
		margin: 40rpx 0rpx 40rpx 40rpx;
	}

	.topInfo {
		align-items: center;
		display: flex;
		height: 100rpx;
		margin: 20rpx auto 0rpx auto;
	}

	.middleInfo {
		margin: 0rpx auto;
	}

	.downInfo {
		padding-bottom: 40rpx;
		margin: 0rpx auto;
	}

	.conUp {
		width: 92%;
		height: 70rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-image: radial-gradient(circle at 448rpx 50rpx, transparent 0%, transparent 8px, #fff 8px, #fff 100%);
		background-position: 244rpx -16rpx;
		margin: 0rpx auto;
	}

	.splitArea {
		border: none;
		border-top: 3rpx dashed #d8d8d8;
		width: 85%;
	}

	.search {
		background-color: #fff;
		height: 100rpx;
	}

	.baseBack {
		width: 92%;
		background-color: #fff;
		padding-bottom: 20rpx;
	}

	.price {
		color: #AC58FA;
		font-size: 50rpx;
	}

	.pp {
		display: inline-block;
		width: 10rpx;
		height: 10rpx;
		border-radius: 50%;
		background-color: grey;
		margin: 0rpx 30rpx 0rpx 50rpx;
	}

	.pv {
		font-weight: bold;
		margin-right: 6rpx;
		color: black;
	}
</style>
